<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" type="image/gif" href="slike/animated_favicon1.gif">
<script src="skripte/Cookies.js"></script>
<script src="skripte/proba1.js"></script>
<script src="skripte/urlParam.js"></script>
<script src="jQuery/jquery-1.10.2.js"></script>
<LINK href="stilovi/users.css" rel="stylesheet" type="text/css">
<LINK href="stilovi/srednjeDugme.css" rel="stylesheet" type="text/css">
<LINK href="stilovi/navigacija.css" rel="stylesheet" type="text/css">
<LINK href="stilovi/coda-slider.css" rel="stylesheet" type="text/css">
<LINK href="stilovi/templatemo_style.css" rel="stylesheet"
	type="text/css">
<LINK href="stilovi/login.css" rel="stylesheet" type="text/css">

<title>Unos stanica</title>


<script src="skripte/WSMapStanice.js"></script>
<script
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD6fOOS57s50I2h7Do_28FRcUGY-IOyMs&sensor=false">
	
</script>
<script>
	var map;
	var markers = [];
	var veze = [];
	var suma = 0;
	var k = 0;
	var geocoder;
	var idlinije = GetURLParameter("idlinije");
	if (idlinije == null)
		history.go(-1);

	function initialize() {
		geocoder = new google.maps.Geocoder();

		var mapProp = {
			center : new google.maps.LatLng(43.915886, 17.67907600000001),
			zoom : 7,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			draggable : false
		};
		map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

		google.maps.event.addListener(map, 'click', function(event) {
			addMarker(event.latLng);
		});

		dajStanice(idlinije);
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	function addMarker(location) {

		//alert(location);
		var marker = new google.maps.Marker({
			position : location,
			map : map,
			zoom : 10,
			redosljed : k,
			draggable : true
		});
		google.maps.event.addListener(marker, 'dragend', function(event) {
			pomjeri(marker);
		});
		google.maps.event.addListener(marker, 'click', function() {
		    informacije(marker);
		  });
		k++;
		var retVal = prompt("Naziv stanice : ", "neki naziv");
		while (retVal == null)
			retVal = prompt("Molimo, unesite naziv stanice", "neki naziv");
		marker.naziv = retVal;
		spasiStanicu(marker, idlinije);
		markers.push(marker);
		poveziStanice();

	}
	function prikaziStanicu(idstan,red,gsir,gduz,naziv1)
	{
		//alert(gduz+" "+ gsir + " " + naziv1);
		var location = new google.maps.LatLng(gsir,gduz);
		var marker = new google.maps.Marker({
			position : location,
			map : map,
			zoom : 10,
			draggable : true,
			id: idstan,
			naziv : naziv1,
			redosljed : k
			
		});
		k++;
		markers.push(marker);
		//alert(markers.length);
		google.maps.event.addListener(marker, 'dragend', function(event) {
			pomjeri(marker);
		});
		 google.maps.event.addListener(marker, 'click', function() {
			    informacije(marker);
			  });

		
		poveziStanice();
	}
	function spasiStanicu(mark, idlinija) {
		var req = createRequest(); // defined above
		//Create the callback:
		req.onreadystatechange = function() {
			if (req.readyState != 4)
				return; // Not there yet
			if (req.status != 200) {
				// Handle request failure here...
				return;
			}
			// Request successful, read the response
			var resp = req.responseText;
			//alert(resp);
			mark.id = resp;
			//window.location.reload();
			// ... and use it as needed by your app.
			//alert(r2);

			return;
		};

		parametri = "?gduzina=" + mark.getPosition().lat() + "&gsirina="
				+ mark.getPosition().lng() + "&naziv=" + mark.naziv + "&redni="
				+ mark.redosljed + "&idlinija=" + idlinija;
		req.open("GET", "korisno/stanice/unos" + parametri, true);
		req.send();
	}
	function dajStanice(idlinija) {
		var req = createRequest(); // defined above
		//Create the callback:
		req.onreadystatechange = function() {
			if (req.readyState != 4)
				return; // Not there yet
			if (req.status != 200) {
				// Handle request failure here...
				return;
			}
			// Request successful, read the response
			var respXML = req.responseXML;
			var r1 = respXML.getElementsByTagName("idstanice");
			var r2 = respXML.getElementsByTagName("naziv");
			var r3 = respXML.getElementsByTagName("gduzina");
			var r4 = respXML.getElementsByTagName("gsirina");
			var r5 = respXML.getElementsByTagName("redni");
			//var r6 = respXML.getElementsByTagName("linija");
			for (var i=0;i<r1.length;i++)
		  	{
				var idS=r1[i].childNodes[0].nodeValue;
				var redni=r5[i].childNodes[0].nodeValue;
				var gduzina=r3[i].childNodes[0].nodeValue;
				var gsirina=r4[i].childNodes[0].nodeValue;
				var naziv=r2[i].childNodes[0].nodeValue;
				prikaziStanicu(idS,redni,gduzina,gsirina,naziv);
		  	}
			return;
		};

		parametri = "?id=" + idlinija;
		req.open("GET", "korisno/stanice/listastanica" + parametri, true);
		req.send();
	}
function informacije(marker)
{
	
	var infowindow = new google.maps.InfoWindow({
		content:'<p id="pp" style="color:black;height:30px;width:100px;"><b>Naziv stanice: </b>'+marker.naziv+'</p>'
	  });
	infowindow.open(map,marker);

}
</script>
</head>
<body>

	<div id="slider">
		<div id="templatemo_main">
			<ul id="social_box">
				<h1>Javna saobraćajna mreža Bosne i Hercegovine</h1>
			</ul>

			<div id="content">

				<div class="scroll">
					<div class="scrollContainer">

						<div class="panel" id="home">
							<input type="button" class="btn" value="Nazad"
								onclick="history.go(-1);">
							<div id="mapa">
								<div id="googleMap"
									style="width: 800px; height: 500px; overflow: auto; margin-right: 5px; display: block;"></div>
							</div>


						</div>


					</div>
				</div>

			</div>
		</div>


	</div>

</body>
</html>